<template>
  <div class="admin">
    <div class="header_box">
      <img class="logo" src="../assets/logo.png" alt="" />
      <el-menu
        :default-active="activeIndex"
        background-color="#ffffff"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
      >
        <el-menu-item index="/admin/homestay" route>民宿管理</el-menu-item>
        <!-- <el-menu-item index="/admin/users" route>用户管理</el-menu-item> -->
      </el-menu>
      <div class="exit" @click="exit">退出</div>
    </div>
    <router-view />
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {
      activeIndex: "/index/home",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //退出
    exit() {
      this.$router.push("/login");
    },
  },

  components: {},
};
</script>

<style scoped>
.admin{
  width: 100%;
}
.header_box {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid grey;
}
.exit{
  width: 200px;
  height: 80px;
  margin-right: 50px;
  font-size: 20px;
  line-height: 80px;
  cursor: pointer;
}
.el-menu {
  padding-left: 800px;
  height: 80px;
  /* float: right; */
}
.el-menu--horizontal > .el-menu-item {
  font-size: 20px;
  height: 80px;
  line-height: 80px;
}

</style>

<style>
.logo {
  position: absolute;
  margin-left: 100px;
  /* width: 80px; */
  height: 80px;
  width: 100px;
  z-index: 10;
}
</style>
